<template>
    <!-- 上面部分容器 -->
    <div class="top-container">
        <!-- 标签和输入框 -->
        <div class="edit-title">
            <div class="text-title">文章标题</div>
            <el-input v-model="input_title" class="input-title" placeholder="输入标题..."></el-input>
        </div>
    </div>
    <el-divider style="margin: 0px;width: 96%;margin-top: 15px;" />
    <div style="height:10px;width: 100%;margin-top: 15px"></div>
    <div class="bottom-container">
        <div class="text-title">文章内容</div>
        <el-input v-model="textarea" type="textarea" :rows="25" class="input-context" placeholder="输入文章内容...">
        </el-input>
        <div style="width: 10%;">
            <el-button style="margin-left: 15px;" type="success" @click="submitUpload">提交</el-button>
            <el-button style="margin-left: 15px;margin-top: 10px;background-color: #545c64;color: #fff;" @click="saveAsDraft">保存为草稿
            </el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
    import {
        listBlogById,
        updateBlog,
    } from '@/api'
    import {
        ref,
    } from 'vue'
    import {
        ElMessage,
    } from 'element-plus'

    const input_title = ref('')
    const textarea = ref('')

    function getUrlParam(key: string) {

        // 获取地址栏上"?"问号及后面的参数
        let search = window.location.search.substring(1);
        console.log('search：', search);

        // 将url参数转为url对象
        let urlsp = new URLSearchParams(search);
        console.log('URLSearchParams', urlsp);

        // 根所传入的key返回对应的参数值
        return urlsp.get(key);
    }

    //判断是否为博主
    listBlogById(getUrlParam('id')).then(
        res => {
            if (res.data.bloggerId != localStorage.getItem("userId")) {
                alert("你无权修改其他用户博客");
                window.location.href = "http://localhost:8080/index";
            } else {
                input_title.value = res.data.title;
                textarea.value = res.data.content;
            }

        }
    )

    //提交更改
    const submitUpload = () => {
        let data = {
            title: input_title.value,
            content: textarea.value,
            bloggerId: localStorage.getItem('userId'),
            id: getUrlParam('id'),
            status: 1,
        }
        console.log(data);

        updateBlog(data).then(
            res => {
                if (res.code === 200) {
                    ElMessage({
                        message: '修改博文成功,3秒后跳转',
                        type: 'success',
                        duration:1000
                    })
                    setTimeout(() => {
                        ElMessage({
                        message: '修改博文成功,2秒后跳转',
                        type: 'success',
                        duration:1000
                        })
                    }, 1000)
                    setTimeout(() => {
                        ElMessage({
                        message: '修改博文成功,1秒后跳转',
                        type: 'success',
                        duration:1000
                        })
                    }, 2000)
                    setTimeout(() => {
                        window.location.href = 'http://localhost:8080/myblog';
                    },3000)

                } else {
                    ElMessage({
                        message: '修改失败，网络异常',
                        type: 'error',
                    })
                }
            }
        )
}

const saveAsDraft = () => {
    let data = {
            title: input_title.value,
            content: textarea.value,
            bloggerId: localStorage.getItem('userId'),
            id: getUrlParam('id'),
            status: 0,
        }
        console.log(data);

        updateBlog(data).then(
            res => {
                if (res.code === 200) {
                    ElMessage({
                        message: '保存草稿成功,3秒后跳转',
                        type: 'success',
                    })
                    setTimeout(() => {
                        window.location.href = "http://localhost:8080/myblog";
                    }, 3000)
                } else {
                    ElMessage({
                        message: '保存失败，网络异常',
                        type: 'error',
                    })
                }
            }
        )
    }
</script>

<style scoped>
    .top-container {
        height: 120px;
        width: 80%;
        display: flex;
        align-items: center;

        /* justify-content: center; */
    }

    .edit-title {
        width: 100%;
        height: 30px;
        display: flex;
        gap: 10px;
    }

    .text-title {
        height: 30px;
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-left: 100px;
    }

    .input-title {
        width: 350px;
        height: 30px;
    }

    .bottom-container {
        width: 90%;
        height: 60%;
        display: flex;
    }

    .input-context {
        width: 1000px;
        margin-left: 10px;
    }
</style>